import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(Router)

const router = new Router({
    mode: 'hash', // 你选的是 no history mode
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home,
            children: [
                {
                    path: 'user',
                    name: 'TestCodemirror',
                    component: () => import('../layouts/home-main/User.vue')
                }
            ]
        },
        {
            path: '/about',
            name: 'About',
            component: () => import('../views/AboutView.vue')
        },
        {
            path: '/test',
            name: 'Test',
            component: () => import('../views/TestVue.vue')
        },
        {
            path: '/study',
            name: 'Study',
            component: () => import('../components/demo/MainLayout.vue'), // 父级布局组件
            children: [
                {
                    path: 'vuex', // 注意这里没有斜杠 '/'，是相对路径
                    name: 'TestVuex',
                    component: () => import('../components/demo/vuex/_Layout.vue'),
                    children: [
                        {
                            path: 'demo1', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestGet',
                            component: () => import('../components/demo/vuex/Demo1.vue')
                        },
                        {
                            path: 'demo2', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestGet',
                            component: () => import('../components/demo/vuex/Demo2.vue')
                        }
                    ]
                },
                {
                    path: 'axios',
                    name: 'TestAxios',
                    component: () => import('../components/demo/axios/_Layout.vue'), // 父级布局组件
                    children: [
                        {
                            path: 'get', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestGet',
                            component: () => import('../components/demo/axios/BasicGet.vue')
                        },
                        {
                            path: 'post', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestPost',
                            component: () => import('../components/demo/axios/BasicPost.vue')
                        },
                        {
                            path: 'put', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestPut',
                            component: () => import('../components/demo/axios/BasicPut.vue')
                        },
                        {
                            path: 'delete', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestDelete',
                            component: () => import('../components/demo/axios/BasicDelete.vue')
                        },
                        {
                            path: 'api', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestApi',
                            component: () => import('../components/demo/axios/Api.vue')
                        },
                        {
                            path: 'mock', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestMock',
                            component: () => import('../components/demo/axios/Mock.vue')
                        },
                        {
                            path: 'sender', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestSender',
                            component: () => import('../components/demo/axios/sender.vue')
                        }
                    ]
                },
                {
                    path: 'chat',
                    name: 'TestChat',
                    component: () => import('../components/demo/MainLayout.vue'),
                    children: [
                        {
                            path: 'basic', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestGet',
                            component: () => import('../components/chat/Basic.vue')
                        },
                        {
                            path: 'stream', // 注意这里没有斜杠 '/'，是相对路径
                            name: 'TestGet',
                            component: () => import('../components/chat/Stream.vue')
                        }
                    ]
                },
                {
                    //404页面
                    path: '/:path(.*)',
                    component: () =>
                        import ('../layouts/NotFound.vue')
                },
            ]
        }
    ]
})
export default router